<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "Stream",
  inject: ["getNode"],

  data() {
    return {
      height: 128,
      width: 64,
      title: "Stream",
      text: "实时计算"
    };
  },
  computed: {
    nodeStyle() {
      return {
        width: this.width + "px",
        height: this.height + "px"
      };
    }
  },
  mounted() {
    const node = (this as any).getNode();
    this.width = node.getSize().width;
    this.height = node.getSize().height;
    const _text = node.getAttrs().text?.text;
    if (_text) {
      this.text = _text;
    } else {
      node.attr("text/text", this.text);
    }
    node.on("change:attrs", ({ current }: any) => {
      if (current.text) {
        this.text = current.text.text;
      }
    });

    node.on("change:size", ({ current }: any) => {
      const { width, height } = current;
      this.width = width;
      this.height = height;
    });
  }
});
</script>

<template>
  <div class="c-stream" :style="nodeStyle">
    <svg
      t="1731204992126"
      class="c-stream__svg"
      viewBox="0 0 1024 1024"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      p-id="27421"
    >
      <path
        d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z"
        fill="#EDF0F4"
        p-id="27422"
      ></path>
      <path
        d="M597.504 182.528v19.6864c0 5.538133-2.6624 10.0864-10.999467 11.144533-109.149867 5.640533-196.437333 92.8-202.2144 201.949867a11.8784 11.8784 0 0 1-11.8272 11.2896h-19.9936c-3.950933 0-10.666667-2.167467-10.965333-10.487467C346.948267 283.5456 452.676267 177.066667 585.198933 170.666667h0.477867a11.8528 11.8528 0 0 1 11.818667 11.861333zM436.6592 426.7008H417.621333l-0.0512-0.110933h-0.785066a11.904 11.904 0 0 1-11.067734-12.663467c6.3488-96.145067 82.9184-172.714667 179.0464-179.089067a5.998933 5.998933 0 0 1 0.785067 0 11.895467 11.895467 0 0 1 11.921067 11.861334v19.5584c0.017067 0.196267 0.017067 0.384 0.017066 0.571733a10.752 10.752 0 0 1-10.052266 10.734933c-74.2656 5.000533-133.538133 63.872-139.042134 138.094934a11.835733 11.835733 0 0 1-11.7248 11.042133z m160.7936-115.7632v19.6352c0 7.995733-6.954667 10.888533-10.333867 11.2896a85.4528 85.4528 0 0 0-74.436266 74.231467 11.9552 11.9552 0 0 1-11.810134 10.555733h-19.0464a11.835733 11.835733 0 0 1-11.886933-11.776l-0.017067-0.5632 0.017067-0.571733A128.170667 128.170667 0 0 1 584.533333 299.136a11.8016 11.8016 0 0 1 12.8512 10.666667c0.017067 0.196267 0.017067 0.392533 0.017067 0.5888 0 0.187733 0 0.375467-0.017067 0.571733l0.085334-0.034133zM821.742933 596.906667c-5.538133 0-10.0864-2.679467-11.1616-10.990934-5.632-109.175467-92.791467-196.471467-201.949866-202.274133a11.861333 11.861333 0 0 1-11.272534-11.835733v-19.9936c0-3.950933 2.176-10.666667 10.478934-10.9568 132.565333 5.4272 239.061333 111.138133 245.486933 243.6608l0.008533 0.4608a11.861333 11.861333 0 0 1-11.383466 11.835733h-0.4864l-19.720534 0.093867zM597.265067 417.024a11.861333 11.861333 0 0 1 11.904-11.8784 7.364267 7.364267 0 0 1 0.802133 0c96.187733 6.3232 172.8 82.926933 179.165867 179.114667l0.017066 0.785066c0 6.203733-4.795733 11.434667-11.067733 11.8784h-20.266667a10.752 10.752 0 0 1-11.306666-10.043733c-5.0176-74.2656-63.8976-133.5296-138.129067-139.016533a11.8016 11.8016 0 0 1-11.025067-11.733334l-0.085333-19.114666z m115.669333 179.882667H693.418667c-8.0128 0-10.888533-6.946133-11.306667-10.350934a85.461333 85.461333 0 0 0-74.231467-74.410666A11.912533 11.912533 0 0 1 597.333333 500.352V481.1776a11.818667 11.818667 0 0 1 11.758934-11.818667c0.384-0.0256 0.759467-0.0256 1.143466 0a128.1536 128.1536 0 0 1 114.577067 114.551467 11.810133 11.810133 0 0 1-10.6752 12.834133 9.0368 9.0368 0 0 1-1.117867 0l-0.085333 0.162134zM202.24 426.564267c5.538133 0 10.0864 2.6624 11.1616 10.9824 5.632 109.175467 92.8256 196.471467 202.001067 202.24A11.886933 11.886933 0 0 1 426.666667 651.630933v19.985067c0 3.968-2.167467 10.683733-10.4704 10.965333-132.573867-5.410133-239.104-111.121067-245.521067-243.652266L170.666667 438.459733a11.835733 11.835733 0 0 1 11.374933-11.8272h0.494933l19.712-0.068266z m224.477867 179.882666a11.895467 11.895467 0 0 1-11.921067 11.861334h-0.776533c-96.1536-6.340267-172.7488-82.901333-179.114667-179.037867a11.8528 11.8528 0 0 1 11.008-12.680533h20.309333c5.888-0.315733 10.922667 4.181333 11.298134 10.069333 5.009067 74.257067 63.8976 133.521067 138.120533 139.008 6.1952 0.4096 11.008 5.538133 11.025067 11.733333l0.0512 19.054934zM311.04 426.5728h19.524267c8.0128 0 10.888533 6.954667 11.306666 10.333867a85.486933 85.486933 0 0 0 74.231467 74.427733c5.998933 0.682667 10.530133 5.742933 10.555733 11.776v19.131733c0 6.519467-5.256533 11.810133-11.776 11.861334h-1.1264A128.170667 128.170667 0 0 1 299.178667 439.5008a11.895467 11.895467 0 0 1 2.705066-8.661333c2.0224-2.414933 4.923733-3.925333 8.055467-4.181334h1.1264l-0.017067-0.1024z m115.729067 395.136c0-5.5296 2.653867-10.077867 10.9824-11.144533 109.1328-5.649067 196.394667-92.7744 202.222933-201.898667a11.861333 11.861333 0 0 1 11.835733-11.2896h19.9936c3.9424 0 10.666667 2.167467 10.9568 10.487467-5.444267 132.565333-111.163733 239.0528-243.677866 245.461333a11.869867 11.869867 0 0 1-12.296534-11.374933v-20.241067h-0.017066z m179.882666-224.469333a11.8272 11.8272 0 0 1 11.861334 11.8528v0.8448c-6.314667 96.196267-82.901333 172.834133-179.089067 179.2a11.912533 11.912533 0 0 1-12.680533-11.0592v-20.266667c-0.017067-0.187733-0.017067-0.375467-0.017067-0.571733 0-5.632 4.360533-10.350933 10.043733-10.7264 74.2656-5.009067 133.5296-63.872 139.042134-138.094934a11.784533 11.784533 0 0 1 11.7248-11.042133l19.114666-0.136533zM426.786133 712.874667v-19.456c0-7.995733 6.9632-10.888533 10.350934-11.2896a85.504 85.504 0 0 0 74.427733-74.231467 11.9296 11.9296 0 0 1 11.793067-10.555733h19.114666a11.818667 11.818667 0 0 1 11.861334 11.758933v1.152a128.187733 128.187733 0 0 1-114.5856 114.56 11.8272 11.8272 0 0 1-12.8768-11.323733l0.017066-0.5632-0.1024-0.0512z"
        fill="#FF5C00"
        p-id="27423"
      ></path>
    </svg>
    <div class="c-stream__content">
      <div class="c-stream__content__title">{{ title }}</div>
      <div class="c-stream__content__text">{{ text }}</div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.c-stream {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  border: 1px solid #5f95ff;
  background-color: rgba(95, 149, 255, 0.05);
  &__svg {
    max-width: 64px;
    max-height: 64px;
  }
  &__content {
    flex: 1;
    &__title {
      font-size: 16px;
      color: #0e1215;
      font-weight: 600;
    }
    &__text {
      font-size: 12px;
      color: #6c757d;
    }
  }
}
</style>
